<script setup>
import {reactive} from "vue"
import { RouterLink } from 'vue-router'

import { useUserStore } from "../stores/counter";
const userStore = useUserStore()
const power = userStore.userMsg.power;

// 定义导航数据：真实情况下，应该发起数据请求
let navList = reactive([{
  id:"ahsfsdu",
  title:"首页",
  path:"/",
  icon:"Edit",
  power:[0, 1, 2]
},{
  id:"jshgvdib",
  title:"用户管理",
  path:"/user",
  icon:"Share",
  power:[0, 1, 2],
  children:[{
    id:"jshgvdib-hafsdgs",
    title:"查看所有用户",
    path:"/user",
    icon:"Delete",
    power:[0, 1, 2]
  },{
    id:"jshgvdib-096767",
    title:"添加用户",
    path:"/adduser",
    icon:"Loading",
    power:[0]
  }]
},{
  id:"56478",
  title:"会议管理",
  path:"/meeting",
  icon:"Loading",
  power:[0, 1, 2],
  children:[{
    id:"56478-shdhgf",
    title:"查看会议",
    path:"",
    icon:"Loading",
    power:[0, 1, 2]
  },{
    id:"56478-lkfh",
    title:"添加会议",
    path:"",
    icon:"Loading",
    power:[1],
  }]
},{
  id:"jahgisd",
  title:"会议室管理",
  path:"/meetingRoom",
  icon:"Loading",
  power:[0]
},{
  id:"ja676575d",
  title:"部门管理",
  path:"/team",
  icon:"Loading",
  power:[0]
}])

// 根据当前用户权限，筛选导航信息
navList = navList.filter(val=>{
  if(val.children){
    val.children = filter(val.children, power)
  }
  return val.power.includes(power);
});
function filter(arr, power){
  return arr.filter(val=>{
    return val.power.includes(power)
  })
}

const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}

</script>

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo menuList"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu v-for="(item,idx) in navList" :index="idx+1+''" :class="item.children ? '' : 'hide_arrow'">
      <template #title>
        <el-icon>
          <component :is="item.icon" />
        </el-icon>
        <!-- <RouterLink
          :to="item.path"
          :key="item.id"
        ></RouterLink> -->
          {{ item.title }}
      </template>
      <el-menu-item-group v-if="item.children">
        <el-menu-item v-for="(val,i) in item.children" :key="val.id" @click="$router.push(val.path)" :index="(idx+1)+'-'+(i+1)">
          <el-icon>
            <component :is="val.icon" />
          </el-icon>
          {{ val.title }}
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<style>
.menuList .hide_arrow .el-sub-menu__icon-arrow{
  display:none
}
</style>